<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯效果</title>
		<style>
			/* 顶部样式 */
			.top_context{
				height: 200px;
				background-color: #e0e0e0;
				text-align: center;
				line-height: 200px;
				text-align: center;
			}
			/* 吸顶灯内容元素初始效果 */
			.sticky_element{
				width: 100%;
				height: 50px;
				background-color: #333;
				line-height: 50px;
				text-align: center;
				color: #fff;
			}
			/* 页面主题区域 */
			.main_context{
				height: 8000px;
				background-color: #e0e0e0;
			}
			/* 样式：吸顶灯卡页面顶部 */
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			//ready()事件源语法：$(document).ready(function(){});
			//             简写：$(function(){});
			//  总结：页面元素全部加载完毕，在执行JQ相关操作
			//  script元素放在最后一个body位置【可不写】
			$(function(){
				//固定值：页面顶部到吸顶灯位置---BOM语法
				//offset() 获取或者设置元素相对于文档的偏移量
				//offset().top  从顶部到吸顶灯元素的偏移量
				var se=$(".sticky_element").offset().top;
				
				//滚动值：BOM对象+事件源
				//$(window) 抓取页面window对象,监听窗口事件：窗口改变，滚动
				// 理解：实时抓取页面滚动值
				$(window).scroll(function(){
					//滚动值：获取页面滚动位置
					//scrollTop()获取页面滚动垂直距离
					var st=$(window).scrollTop();
					
					//判断  固定值大于滚动值，滚动超过200，实现切换：吸顶效果
					if(st>se){
						//条件成立:大于200px 切换吸顶效果
						$(".sticky_element").addClass("sticky");
						}else{
							//条件不成立:小于200px
							$(".sticky_element").removeClass("sticky");
						}
					
				});
			});
		</script>
	</head>
	<body>
		<!-- 顶部内容：导航 -->
		<div class="top_context">顶部内容区域</div>
		<!-- 吸顶灯内容 -->
		<div class="sticky_element">我是吸顶元素</div>
		<!-- 页面主体内容 -->
		<div class="main_context">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod consequuntur porro, dolorem eius commodi sunt odit ipsa nam est aperiam, minus optio ullam dignissimos neque, voluptates magnam aut fugit recusandae!</div>
		
	</body>
</html>

<!-- 
	吸顶灯效果---BOM案例：浏览器6个对象的方法使用
	思路：1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
	     2.页面顶部到吸顶灯位置：200px，大于200px
	     3.追加第一个样式：固定定位，页面顶部位置
				
	    1.追加样式：吸顶灯卡在页面顶部
	    2.固定值：页面顶部到吸顶灯位置 
		3.固定值>滚动值，滚动范围超出200px，实现切换
		-->